feat: add visual-diff package with syntax highlighting#53
Merged
pyramation merged 3 commits intomainfrom Jan 6, 2026
Merged
Conversation
- Add new visual-diff package for beautiful code diffs - Implement LCS-based diff algorithm with context lines - Add syntax highlighting for 15+ languages (JS, TS, Python, SQL, Go, Rust, etc.) - Create terminal renderer with ANSI colors - Create HTML renderer with dark/light mode support - Include 6 built-in themes (default, github, monokai, dracula, nord, minimal) - Add customizable theming system - Support unified and side-by-side diff views - Parse and create unified diff format - Add comprehensive test suite (108 tests)
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
- Add dev script with terminal and HTML preview modes - Include sample fixtures for TypeScript, SQL, and Python diffs - Support --terminal, --html, and --serve flags - Generate HTML preview with all 6 themes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat: add visual-diff package with syntax highlighting
Summary
Adds a new
@interweb/visual-diffpackage to the dev-utils monorepo that provides beautiful code diffs with syntax highlighting for both terminal and HTML output.Key features:
yansepackageThe package follows existing monorepo conventions and includes 108 passing tests.
Updates since last revision
visual-diffto@interweb/visual-diffto match the@interwebscope conventiondev/folder with visual preview scripts for testing the packagepnpm devcommand supports--terminal,--html, and--serveflagsReview & Testing Checklist for Human
Verify diff algorithm correctness - The LCS algorithm is implemented from scratch (not using an external library). Test with real-world code files to ensure diffs are computed correctly, especially for edge cases like large files or files with many changes.
Review regex-based syntax highlighting - The tokenizer in
highlight.tsuses regex patterns which may miss edge cases (nested strings, multi-line comments, template literals). Test with complex code samples.Check HTML output for XSS - The HTML renderer escapes content but review
render/html.tsto ensure no injection vectors exist, especially with custom themes or unusual input.Test the
visualDiffconvenience function - Inindex.ts, this function uses dynamicrequire()calls which is unusual. Verify it works in both CJS and ESM contexts.Verify side-by-side rendering - The alignment logic for side-by-side diffs in both terminal and HTML renderers is complex. Test with various diff scenarios.
Recommended test plan:
Notes
eslint.config.jsbut repo has.eslintrc.json)Requested by: Dan Lynch (@pyramation)
Devin session: https://app.devin.ai/sessions/05f85b338182490093cbbc647500f5d1